import React from 'react';
import { Cascader as AntdCascader } from 'antd';
import type { CascaderProps as AntdCascaderProps } from 'antd';
import { createStyles } from 'antd-style';

export interface CascaderProps extends AntdCascaderProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
  /**
   * @description 值变化回调
   */
  onChange?: (value: any, selectOptions?: any) => void;
  /**
   * @description 显示渲染函数
   */
  displayRender?: (label: any[], selectedOptions?: any[]) => React.ReactNode;
  /**
   * @description 加载数据回调
   */
  loadData?: (selectOptions?: any[]) => void;
}

const useStyles = createStyles(({ token, css }) => ({
  cascader: css`
    width: 100%;
  `,
}));

const CascaderComponent: React.FC<CascaderProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const cascaderClassName = cx(
    className,
    customClassName,
    styles.cascader
  );

  return <AntdCascader className={cascaderClassName} {...restProps as any} />;
};

const Cascader = Object.assign(CascaderComponent, {
  Panel: AntdCascader.Panel,
  SHOW_CHILD: AntdCascader.SHOW_CHILD,
  SHOW_PARENT: AntdCascader.SHOW_PARENT,
  _InternalPanelDoNotUseOrYouWillBeFired: AntdCascader._InternalPanelDoNotUseOrYouWillBeFired,
});

export { Cascader };
export default Cascader;

